<%--
  Created by IntelliJ IDEA.
  User: 86176
  Date: 2022/2/26
  Time: 9:11
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=basePath%>"/>
    <title>Title</title>
    <!--引入EasyUI的资源-->
    <link rel="stylesheet" type="text/css" href="static/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="static/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="static/themes/color.css">
    <link rel="stylesheet" type="text/css" href="static/themes/demo.css">
    <script type="text/javascript" src="static/jquery.min.js"></script>
    <script type="text/javascript" src="static/jquery.easyui.min.js"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        /**************************增加菜单*************************************/
        $(function () {
            //初始化菜单增加对话框是，添加监听事件，当对话框关闭时清空表单
            $("#addMenuDialog").dialog({
                onClose:function () {
                    //清空表单信息
                    $("#menuFrom").form('reset')
                }
            })
            // 给增加菜单按钮增加单击事件
            $("#menuAdd").click(function () {
                //获取用户要增加的子菜单的上级菜单的ID
                var node = $("#menuTreeInfo").tree('getSelected');
                console.log(node)
                if (node!=null){
                    $("#pid").val(node.id);//记录要增加的菜单的上级
                }
                //显示菜单增加的对话框
                $("#addMenuDialog").dialog('open');
            })
            //给完成增加按钮添加单击事件完成表单的异步提交
            $("#addMenuForm").click(function () {
                //异步提交表单
                $("#menuFrom").form('submit',{
                    url:'menu/menuAdd',//请求地址
                    success:function (data) {//回调函数，data为原始的json数据，需要自己使用eval完成数据的转换
                        //使用eval转换data
                        eval("var data="+data);
                        //提示用户
                        if (data.success){
                            $.messager.alert("添加菜单信息",data.message,"info");
                            //关闭增加的对话框
                            $("#addMenuDialog").dialog("close");
                            //重新加载数据
                            $("#menuTreeInfo").tree('reload');
                        }else{
                            $.messager.alert("添加菜单信息",data.message,"error");
                        }
                    }
                })
            })
        })
        /**************************编辑菜单******************************/
        $(function () {
            //给编辑菜单按钮增加单击事件
            $("#menuEdit").click(function () {
                //判断是否要选择编辑的菜单信息
                var node=$("#menuTreeInfo").tree('getSelected');
                console.log(node)
                if (node!=null){
                    //回显菜单数据到表单中
                    $("#editFrom").form('load',{
                        mid:node.id,
                        mname:node.text,
                        url:node.attributes.url,
                        mdesc:node.attributes.mdesc
                    })
                    //显示菜单编辑的对话框
                    $("#editMenuDialog").dialog('open')
                }else{
                    $.messager.alert("提示","请选择要编辑的菜单项","info")
                }
            })
            //给完成编辑按钮增加单击事件
            $("#editMenuForm").click(function () {
                //提交表单
                $("#editFrom").form('submit',{
                    url:'menu/menuEdit',//请求地址
                    success:function (data) {//回调函数，data为原始的json数据，需要自己使用eval完成数据的转换
                        //使用eval转换data
                        eval("var data="+data);
                        //提示用户
                        if (data.success){
                            $.messager.alert("编辑菜单信息",data.message,"info");
                            //关闭增加的对话框
                            $("#editMenuDialog").dialog("close");
                            //重新加载数据
                            $("#menuTreeInfo").tree('reload');
                        }else{
                            $.messager.alert("编辑菜单信息",data.message,"error");
                        }
                    }
                })
            })
        })
        /**************************删除菜单******************************/
        $(function () {
            //给删除菜单按钮添加单机事件
            $("#menuDelete").click(function () {
                //获取要删除的菜单的信息
                var node=$("#menuTreeInfo").tree('getSelected');
                console.log(node)
                if (node!=null){
                   //提示用户是否要删除
                    $.messager.confirm("删除提示","你确定要删除吗",function (r) {
                        if (r){
                            //发起Ajax请求
                            $.get("menu/menuDelete",{mid:node.id,pid:node.attributes.pid},function (data) {
                                //判断
                                if (data.success){
                                    $.messager.alert("提示","删除成功","info");
                                    //重新加载数据
                                    $("#menuTreeInfo").tree('reload');
                                }else{
                                    $.messager.alert("提示","删除失败","error");
                                }
                            })
                        }
                    })
                }else{
                    $.messager.alert("删除提示","请选择一个菜单项","info")
                }
            })
        })
    </script>
</head>
<body>
    <!--创建删除消息提示对话框-->
    <div id="deleteMenuDialog" class="easyui-dialog" title="删除提示" style="width:400px;height:200px;"
         data-options="iconCls:'icon-remove',resizable:false,modal:true,closed:true">
        <p style="text-align: center;color: #00ee00;font-size: 20px">是否确定删除</p>
        <!--操作按钮-->
        <div style="margin-top: 50px;text-align: center">
            <a href="javascript:void(0)" id="ensure" class="easyui-linkbutton c3" style="width:88px">Ok</a>
            <a href="javascript:void(0)" id="cancel" class="easyui-linkbutton c3" style="width:88px">Cancel</a>
        </div>
    </div>
    <!--创建增加菜单的对话框-->
    <div id="editMenuDialog" class="easyui-dialog" title="增加主持人" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:false,modal:true,closed:true">
        <!--创建菜单增加表单-->
        <form id="editFrom" method="post">
            <!--创建隐藏标签存放菜单Id-->
            <input type="hidden" id="mid" name="mid">
            <!--菜单名称-->
            <div style="margin-bottom:20px;margin-top: 25px;text-align: center">
                <input class="easyui-textbox" name="mname" prompt="请输入菜单名称" iconWidth="28" style="width:300px;height:34px;padding:10px;">
            </div>
            <!--菜单url地址-->
            <div style="margin-bottom:20px;text-align: center">
                <input class="easyui-textbox" name="url" prompt="请输入资源地址" iconWidth="28" style="width:300px;height:34px;padding:10px">
            </div>
            <!--菜单的描述-->
            <div style="margin-bottom:20px;text-align: center">
                <input class="easyui-textbox" name="mdesc" prompt="请输入菜单描述" iconWidth="28" style="width:300px;height:34px;padding:10px;">
            </div>
            <!--操作按钮-->
            <div style="margin-bottom: 20px;text-align: center">
                <a href="javascript:void(0)" id="editMenuForm" class="easyui-linkbutton c3" style="width:120px">完成编辑</a>
            </div>
        </form>
    </div>
    <!--创建增加菜单的对话框-->
    <div id="addMenuDialog" class="easyui-dialog" title="添加菜单" style="width:400px;height:300px;"
     data-options="iconCls:'icon-save',resizable:false,modal:true,closed:true">
        <!--创建菜单增加表单-->
        <form id="menuFrom" method="post">
            <!--创建隐藏标签记录要增加的菜单的上级Id-->
            <input type="hidden" id="pid" name="pid" value="">
            <!--菜单名称-->
            <div style="margin-bottom:20px;margin-top: 25px;text-align: center">
                <input class="easyui-textbox" name="mname" prompt="请输入菜单名称" iconWidth="28" style="width:300px;height:34px;padding:10px;">
            </div>
            <!--菜单url地址-->
            <div style="margin-bottom:20px;text-align: center">
                <input id="pass" class="easyui-textbox" name="url" prompt="请输入资源地址" iconWidth="28" style="width:300px;height:34px;padding:10px">
            </div>
            <!--菜单的描述-->
            <div style="margin-bottom:20px;text-align: center">
                <input class="easyui-textbox" name="mdesc" prompt="请输入菜单描述" iconWidth="28" style="width:300px;height:34px;padding:10px;">
            </div>
            <!--操作按钮-->
            <div style="margin-bottom: 20px;text-align: center">
                <a href="javascript:void(0)" id="addMenuForm" class="easyui-linkbutton c3" style="width:120px">完成添加</a>
            </div>
        </form>
    </div>
    <!--创建菜单管理面板，并完成嵌套布局效果-->
    <div class="easyui-panel" style="width:700px;height:500px;padding:10px;">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'west',split:false,title:'操作',collapsible:false" style="width:200px;padding:10px">
                <a id="menuAdd" href="javascript:void(0)" class="easyui-linkbutton c1" style="width:120px;margin: 15px">增加菜单</a><br>
                <a id="menuEdit" href="javascript:void(0)" class="easyui-linkbutton c2" style="width:120px;margin: 15px">编辑菜单</a><br>
                <a id="menuDelete" href="javascript:void(0)" class="easyui-linkbutton c3" style="width:120px;margin: 15px">删除菜单</a><br>
                <a href="javascript:void(0)" class="easyui-linkbutton c4" style="width:120px;margin: 15px">刷新菜单</a><br>
            </div>
            <div data-options="region:'center',title:'当前系统菜单'" style="padding:10px">
                <!--创建url组件加载所有的菜单信息-->
                <ul class="easyui-tree" id="menuTreeInfo" data-options="url:'menu/menuAllInfo'"></ul>
            </div>
        </div>
    </div>
</body>
</html>
